<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS小游戏之是男人坚持30秒</title>
<style type="text/css">
/*科e互联CSS基础框架*/
* {
	padding: 0;
	margin: 0;
	font-size: 12px;
	list-style: none
}

.cor_bs,.cor_bs:hover {
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
}

.keBody {
	background: url(../images/bodyBg.jpg) repeat #333;
}

.keTitle {
	height: 100px;
	line-height: 100px;
	font-size: 30px;
	font-family: '微软雅黑';
	color: #FFF;
	text-align: center;
	font-weight: normal
}

.kePublic {
	background: #fff
		url(http://www.internetke.com/jsEffects/2013111805/images/bg.jpg)
		repeat;
	padding-top: 25px;
}

.keBottom {
	color: #FFF;
	padding-top: 25px;
	line-height: 28px;
	text-align: center;
	font-family: '微软雅黑';
	padding-bottom: 25px
}

.keTxtP {
	font-size: 16px;
	color: #ffffff;
}

.keUrl {
	color: #FFF;
	font-size: 30px;
}

.keUrl:hover {
	text-decoration: underline;
	color: #FFF;
}

.button {
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: 0.25em 0.6em 0.3em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24),
		to(#A51715) );
	background: -moz-linear-gradient(top, #ed1c24, #A51715);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
		endColorstr='#aa1317' );
}

.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b),
		to(#a11115) );
	background: -moz-linear-gradient(top, #c9151b, #a11115);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
		endColorstr='#a11115' );
	color: #fff;
}

.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317),
		to(#ed1c24) );
	background: -moz-linear-gradient(top, #aa1317, #ed1c24);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',
		endColorstr='#ed1c24' );
}
/*科e互联CSS基础框架结束，可删除*/
/*特效CSS代码 开始*/
a {
	color: #fff;
}

ul,li {
	list-style: none;
}

#div1 {
	position: relative;
	width: 450px;
	height: 400px;
	background: #222;
	margin: 30px auto;
	padding-top: 50px;
}

#div2 {
	width: 350px;
	height: 350px;
	background: #fff;
	margin: 0 auto;
}

#son1 {
	position: absolute;
	left: 30px;
	top: 0;
	background: #008040;
	height: 20px;
	width: 100px;
	filter: alpha(opacity = 60);
	opacity: 0.6;
}

#son2 {
	position: absolute;
	right: 30px;
	top: 0px;
	background: #008040;
	height: 100px;
	width: 20px;
	filter: alpha(opacity = 60);
	opacity: 0.6;
}

#son3 {
	position: absolute;
	left: 0;
	bottom: 0;
	background: #008040;
	height: 70px;
	width: 70px;
	filter: alpha(opacity = 60);
	opacity: 0.6;
}

#move {
	position: absolute;
	width: 60px;
	height: 60px;
	background: red;
	filter: alpha(opacity = 60);
	opacity: 0.6;
	cursor: move;
}

#divNavBar {
	border: 1px solid #5F91A6;
	border-radius: 6px 6px 6px 6px;
	padding: 0;
	width: 650px;
	margin: 20px auto;
}

#divNavBar ul {
	zoom: 1;
}

#divNavBar ul:after {
	clear: both;
	content: "";
	display: block;
}

#divNavBar li {
	background:
		url("http://www.qdway.com/THEMES/DeepBlue/STYLE/images/white_1.png")
		no-repeat scroll right 2px transparent;
	float: left;
	margin: 2px;
	padding: 0 2px;
}

#divNavBar a {
	float: left;
	height: 14px;
	margin: 0;
	padding: 6px 10px 4px;
	text-decoration: none;
	color: #fff;
}
/*特效CSS代码 结束*/
</style>
</head>
<body class="keBody">
	<div id="BAIDU_DUP_fp_wrapper"
		style="position: absolute; left: -1px; bottom: -1px; z-index: 0; width: 0px; height: 0px; overflow: hidden; visibility: hidden; display: none;">
		<iframe id="BAIDU_DUP_fp_iframe"
			src="http://pos.baidu.com/wh/o.htm?ltr=http%3A%2F%2Fwww.internetke.com%2Feffects%2Frun%2F2013%2F1122%2F290.html&amp;cf=u"
			style="width: 0px; height: 0px; visibility: hidden; display: none;"></iframe>
	</div>
	<h1 class="keTitle">JS小游戏之是男人坚持30秒</h1>
	<div class="kePublic">
		<!--效果html开始-->
		<div id="mb"
			style="display: none; width: 100%; height: 100%; filter: alpha(opacity = 60); opacity: 0.6; background: #111; position: absolute; top: 0; left: 0; z-index: 9999;"></div>
		<div id="div1">
			<div id="div2">
				<div id="son1" style="left: 30px; top: 0px;"></div>
				<div id="son2" style="left: 400px; top: 0px;"></div>
				<div id="son3" style="left: 0px; top: 380px;"></div>
				<div id="move" style="left: 195px; top: 195px;"></div>
			</div>
		</div>
		<p id="p1"
			style="position: absolute; top: 0px; left: 0; width: 100%; color: #fff; font-size: 24px; text-align: center; z-index: -1;">0:0:14:40</p>
		<p
			style="width: 500px; margin: 0 auto; font-size: 14px; line-height: 22px; padding-bottom: 25px">游戏规则：鼠标移动到红色部分，拖动红块，避免碰到绿色部分，不要碰到黑色区域，坚持的时间越长你越牛X！如果你能坚持30秒，记得给我留言哦！本游戏支持IE，Chrome，Firefox，safari等浏览器！</p>
		<script type="text/javascript">
			var game = {
				ms : 0,
				sec : 0,
				minute : 0,
				hour : 0,
				isMove : true,
				timeStart : null,
				son : [],
				$id : function(id) {
					return typeof id == "string" ? document.getElementById(id)
							: id;
				},
				redDiv : function() {
					return game.$id("move");
				},
				writeDiv : function() {
					return game.$id("div2");
				},
				move : function(obj1, obj2, v) {
					var o = game.$id(obj2);
					var redDiv = game.$id("move");
					var changeSpeed = 0;
					var x = o.offsetLeft, y = o.offsetTop, fx = 1, fy = 1;
					var iWidth = game.$id(obj1).offsetWidth
							- game.$id(obj2).offsetWidth;
					var iHeight = game.$id(obj1).offsetHeight
							- game.$id(obj2).offsetHeight;
					o.Timer = setInterval(function() {
						x += v * fx;
						y += v * fy;
						changeSpeed++;
						if (changeSpeed % 300 == 0) {
							v += 2;
						}
						if (x > iWidth || x < 0) {
							fx *= -1;
						}
						if (y > iHeight || y < 0) {
							fy *= -1;
						}
						o.style.left = x + 'px';
						o.style.top = y + 'px';
						if (game.crashCheck(o, redDiv)) {
							game.clearSet();
							clearInterval(game.timeStart);
							game.timeStart = null;
							game.stopMove();
							alert("您坚持了" + game.$id("p1").innerHTML + "秒");
							setTimeout(game.iLoad, 300);
						}
					}, 30);
				},
				oTime : function() {
					game.ms = parseInt(game.ms) + 10;
					if (parseInt(game.ms) == 100) {
						game.sec++;
						game.ms = 0;
					}
					if (parseInt(game.sec) == 60) {
						game.minute++;
						game.sec = 0;
					}
					if (parseInt(game.minute == 60)) {
						game.hour++;
						game.minute = 0;
					}
					if (parseInt(game.ms) < 10) {
						game.ms = "0" + game.ms;
					}
					var show = game.$id("p1");
					if (game.sec < 10)
						show.innerHTML = game.hour + ":" + game.minute + ":0"
								+ game.sec + ":" + game.ms + "";
					if (game.minute < 10)
						show.innerHTML = game.hour + ":0" + game.minute + ":"
								+ game.sec + ":" + game.ms + "";
					if (game.sec < 10 && game.minute < 10)
						show.innerHTML = game.hour + ":0" + game.minute + ":0"
								+ game.sec + ":" + game.ms + "";
					else
						show.innerHTML = game.hour + ":" + game.minute + ":"
								+ game.sec + ":" + game.ms + "";
				},
				iMouse : null,
				oDiv : null,
				startMove : function(obj, ev) {
					var oEvent = ev || event;
					if (game.isMove) {
						game.move("div1", "son1", 3);
						game.move("div1", "son2", 3);
						game.move("div1", "son3", 3);
						game.ms = 0;
						game.sec = 0;
						game.minute = 0;
						game.hour = 0;
						game.timeStart = setInterval("game.oTime()", 100);
						game.isMove = false;
					}
					game.iMouse = {
						x : oEvent.clientX,
						y : oEvent.clientY
					};
					game.oDiv = {
						x : obj.offsetLeft,
						y : obj.offsetTop
					};
					if (obj.setCapture) {
						obj.onmousemove = game.doMove;
						obj.onmouseup = game.stopMove;
						obj.setCapture();
					} else {
						document.addEventListener("mousemove", game.doMove,
								true);
						document.addEventListener("mouseup", game.stopMove,
								true);
					}
				},
				doMove : function(ev) {
					var oEvent = ev || event;
					l = oEvent.clientX - game.iMouse.x + game.oDiv.x;
					t = oEvent.clientY - game.iMouse.y + game.oDiv.y;
					if (l < game.writeDiv().offsetLeft
							|| l > (game.writeDiv().offsetWidth
									- game.redDiv().offsetWidth + game
									.writeDiv().offsetLeft)
							|| t < game.writeDiv().offsetTop
							|| t > (game.writeDiv().offsetHeight
									- game.redDiv().offsetHeight + game
									.writeDiv().offsetTop)) {
						game.clearSet();
						clearInterval(game.timeStart);
						game.timeStart = null;
						game.stopMove();
						alert("您坚持了" + game.$id("p1").innerHTML + "秒");
						setTimeout(game.iLoad, 100);
					}
					game.redDiv().style.left = l + "px";
					game.redDiv().style.top = t + "px";
				},
				stopMove : function(ev) {
					if (game.redDiv().releaseCapture) {
						game.redDiv().onmousemove = null;
						game.redDiv().onmouseup = null;
						game.redDiv().releaseCapture();
					} else {
						document.removeEventListener("mousemove", game.doMove,
								true);
						document.removeEventListener("mouseup", game.stopMove,
								true);
					}
				},
				crashCheck : function(objDrag, oDiv) {
					var dragDiv1 = {
						l1 : objDrag.offsetLeft,
						r1 : objDrag.offsetLeft + objDrag.offsetWidth,
						t1 : objDrag.offsetTop,
						b1 : objDrag.offsetTop + objDrag.offsetHeight
					};
					var moveDiv2 = {
						l1 : oDiv.offsetLeft,
						r1 : oDiv.offsetLeft + oDiv.offsetWidth,
						t1 : oDiv.offsetTop,
						b1 : oDiv.offsetTop + oDiv.offsetHeight
					};
					if (dragDiv1.r1<moveDiv2.l1||dragDiv1.l1>moveDiv2.r1
							|| dragDiv1.b1<moveDiv2.t1||dragDiv1.t1>moveDiv2.b1) {
						return false;
					} else {
						return true;
					}
				},
				clearSet : function() {
					var divNum = game.$id("div2").getElementsByTagName("div");
					for ( var i = 0, l = divNum.length - 1; i < l; i++) {
						clearInterval(divNum[i].Timer);
						divNum[i].Timer = null;
					}
				},
				success : function() {
					var divNum = game.$id("div2").getElementsByTagName("div");
					for ( var i = 0, l = divNum.length - 1; i < l; i++) {
						game.son.push(divNum[i].offsetLeft);
						game.son.push(divNum[i].offsetTop);
					}
					game.$id("move").style.left = (game.$id("div1").offsetWidth - game
							.$id("move").offsetWidth)
							/ 2 + "px";
					game.$id("move").style.top = (game.$id("div1").offsetHeight - game
							.$id("move").offsetHeight)
							/ 2 + "px";
					game.$id("move").onmousedown = function(ev) {
						game.startMove(this, ev);
					};
					document
							.write("<scr"+"ipt src=\"http://js.tongji.linezing.com/2360374/tongji.js\" language=\"JavaScript\" charset=\"gb2312\"></sc"+"ript>");
				},
				iLoad : function() {
					game.isMove = true;
					game.$id("move").style.left = (game.$id("div1").offsetWidth - game
							.$id("move").offsetWidth)
							/ 2 + "px";
					game.$id("move").style.top = (game.$id("div1").offsetHeight - game
							.$id("move").offsetHeight)
							/ 2 + "px";
					var divNum = game.$id("div2").getElementsByTagName("div");
					for ( var i = 0, l = divNum.length - 1; i < l; i++) {
						var n = 2 * i;
						divNum[i].style.left = game.son[n] + "px";
						divNum[i].style.top = game.son[n + 1] + "px";
					}
				}
			};
			game.success();
		</script>
		<script src="http://js.tongji.linezing.com/2360374/tongji.js"
			language="JavaScript" charset="gb2312"></script>
		<img
			src="http://dt.tongji.linezing.com/tongji.do?unit_id=2360374&amp;uv_id=12791979343238205962&amp;uv_new=1&amp;cna=&amp;cg=&amp;mid=&amp;mmland=&amp;ade=&amp;adtm=&amp;sttm=&amp;cpa=&amp;ss_id=3124176526&amp;ss_no=0&amp;ec=1&amp;ref=http%3A//www.internetke.com/effects/run/2013/1122/290.html&amp;url=http%3A//www.internetke.com/effects/run/2013/1122/290.html&amp;title=JS%u5C0F%u6E38%u620F%u4E4B%u662F%u7537%u4EBA%u575A%u630130%u79D2&amp;charset=GBK&amp;domain=internetke.com&amp;hashval=1446&amp;filtered=0&amp;app=Netscape&amp;agent=Mozilla/5.0%20%28Windows%20NT%206.1%3B%20WOW64%29%20AppleWebKit/537.36%20%28KHTML%2C%20like%20Gecko%29%20Chrome/31.0.1650.57%20Safari/537.36&amp;color=32-bit&amp;screen=1366x768&amp;lg=zh-cn&amp;je=1&amp;fv=11.9%20r900&amp;st=1422434578&amp;vc=74ffc7cd&amp;ut=0&amp;url_id=0&amp;cnu=0.5866703540086746"
			border="0" width="1" height="1">
		<!--效果html结束-->
	</div>
	<div class="keBottom">
		<p class="keTxtP">
			科e互联网页特效集锦---更多特效请访问 <a class="keUrl"
				href="http://www.internetke.com" target="_blank">www.internetke.com</a>
		</p>
		<p class="keTxtP">
			本站导航： <a href="http://www.internetke.com/" target="_blank"
				class="cor_bs">网站建设</a> | <a
				href="http://www.internetke.com/material/" target="_blank"
				class="cor_bs">网页素材</a> | <a
				href="http://www.internetke.com/effects/" target="_blank"
				class="cor_bs">网页特效</a> | <a href="http://www.internetke.com/share/"
				target="_blank" class="cor_bs">设计分享</a> | <a
				href="http://www.internetke.com/tutorial/" target="_blank"
				class="cor_bs">建站教程</a> | <a href="http://www.internetke.com/model/"
				target="_blank" class="cor_bs">网站模版</a> | <a
				href="http://www.internetke.com/appreciate/" target="_blank"
				class="cor_bs">酷站赏析</a>
		</p>
		<p class="keTxtP">
			＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。 <a
				target="_blank"
				href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779"
				class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a>
		</p>
	</div>
	<!--广告代码开始-->
	<div style="text-align: center">
		<script src="/plus/ad_js.php?aid=22" language="javascript"></script>
		<script type="text/javascript">
			/*728*90，创建于2013-11-6*/
			var cpro_id = "u1404884";
		</script>
		<script src="http://cpro.baidustatic.com/cpro/ui/c.js"
			type="text/javascript"></script>
		<div id="BAIDU_DUP_wrapper_u1404884_0">
			<iframe id="cproIframe_u1404884_1" width="728" height="90"
				src="http://pos.baidu.com/acom?adn=3&amp;at=134&amp;aurl=&amp;cad=1&amp;ccd=32&amp;cec=GBK&amp;cfv=11&amp;ch=0&amp;col=zh-CN&amp;conOP=0&amp;cpa=1&amp;dai=1&amp;dis=0&amp;layout_filter=rank%2Ctabcloud&amp;ltr=http%3A%2F%2Fwww.internetke.com%2Feffects%2Frun%2F2013%2F1122%2F290.html&amp;ltu=http%3A%2F%2Fwww.internetke.com%2Feffects%2Frun%2F2013%2F1122%2F290.html&amp;lunum=6&amp;n=88038099_cpr&amp;pcs=1345x582&amp;pis=10000x10000&amp;ps=866x0&amp;psr=1366x768&amp;pss=1345x866&amp;qn=82259e57926eaecf&amp;rad=&amp;rsi0=728&amp;rsi1=90&amp;rsi5=4&amp;rss0=%23FFFFFF&amp;rss1=%23FFFFFF&amp;rss2=%230000FF&amp;rss3=%23444444&amp;rss4=%23008000&amp;rss5=&amp;rss6=%23e10900&amp;rss7=&amp;scale=&amp;skin=&amp;td_id=1404884&amp;tn=text_default_728_90&amp;tpr=1422434577926&amp;ts=1&amp;version=2.0&amp;xuanting=0&amp;dtm=BAIDU_DUP2_SETJSONADSLOT&amp;dc=2&amp;di=u1404884"
				align="center,center" marginwidth="0" marginheight="0"
				scrolling="no" frameborder="0" allowtransparency="true"></iframe>
		</div>
		<script charset="utf-8"
			src="http://pos.baidu.com/acom?di=u1404884&amp;dcb=BAIDU_DUP2_define&amp;dtm=BAIDU_DUP2_SETJSONADSLOT&amp;dbv=2&amp;dci=0&amp;dri=0&amp;dis=0&amp;dai=1&amp;dds=&amp;drs=1&amp;dvi=1422254347&amp;ltu=http%3A%2F%2Fwww.internetke.com%2Feffects%2Frun%2F2013%2F1122%2F290.html&amp;liu=&amp;ltr=http%3A%2F%2Fwww.internetke.com%2Feffects%2Frun%2F2013%2F1122%2F290.html&amp;lcr=&amp;ps=866x0&amp;psr=1366x768&amp;par=1366x720&amp;pcs=1345x582&amp;pss=1345x866&amp;pis=-1x-1&amp;cfv=11&amp;ccd=32&amp;chi=0&amp;cja=true&amp;cpl=39&amp;cmi=94&amp;cce=true&amp;col=zh-CN&amp;cec=GBK&amp;cdo=-1&amp;tsr=0&amp;tlm=1422405777&amp;tcn=1422434578&amp;tpr=1422434577926&amp;dpt=none&amp;coa=&amp;baidu_id="></script>
	</div>
	<!--广告代码结束-->

</body>
</html>